import { JSX } from 'react'

export function Nav() :JSX.Element {

    const tabs = [
        {
            name: 'Home',
            href: '/'
        },
        {
            name: 'About',
            href: '/about'
        },
        {
            name: 'Contact',
            href: '/contact'
        }
    ]

    return (
        <nav className={'bg-black'} >
            <div className={'max-w-7xl mx-auto h-20 flex items-center gap-8 text-white font-serif'}>
                <a href={'/'} className={'p-2 text-2xl hover:translate-x-2 duration-200'}>Logo</a>
                <div className={'flex items-center gap-8'}>
                    {
                        tabs.map((tab) => {
                            return (
                                <a href={tab.href} className={'p-2 hover:bg-purple-500'} key={tab.name}>{tab.name}</a>
                            )
                        })
                    }
                </div>
                <div className={'flex items-center gap-8 ml-auto'}>
                    <a href={'/login'} className={'p-2 hover:bg-purple-700'}>Login</a>
                    <a href={'/register'} className={'p-2 hover:bg-purple-700'}>Register</a>
                </div>
            </div>
        </nav>
    )
}
